<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*日历控件样式 begin*/
.wDatePicker{
	border:1px solid #ccc;
}
.wDatePicker .wdp-titleBar-date{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
.wDatePicker .wdp-titleBar{
	height: 40px;
	line-height: 40px;
	position: relative;
}
.wDatePicker .wdp-titleBar-l-arrow{
	float: left;
	height: 100%;
	width: 50px;
}
.wDatePicker .wdp-titleBar-date{
	position: absolute;
	left:50px;
	right: 50px;
	top:0;
	bottom:0;
}
.wDatePicker .wdp-titleBar-r-arrow{
	float: right;
	height: 100%;
	width: 50px;
}
.wDatePicker .wdp-dc{
	position: absolute;
	top:40px;
	bottom:0;
	left:0;
	right: 0;
}
.wDatePicker .wdp-dc-up{
	height: 30px;
	line-height: 30px;
}
.wDatePicker .wdp-dc-fail{
	color:#ccc;
}
.wDatePicker .wdp-dc-current{
	background-color: #6495ED;
	border-radius: 5px;
}
.wDatePicker .wdp-dc-normal{
	cursor: pointer;
	border-radius: 5px;
	position:relative;
}
.wDatePicker .wdp-dc-normal:hover{
	background-color: #87CEEB
}
.wDatePicker .wdp-dc-normal i{
	position: absolute;
	width:60%;
	height:60%;
	display:block;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}
.wDatePicker .wdp-dc-select{
	background-color: #87CEEB;
}
.wDatePicker .wdp-titleBar-arrow i{
	font-style: 18px;
	display: block;
	width:30px;
	height: 30px;
	margin-top:10px;
	margin-left:10px;
	cursor: pointer;
	font-style: normal;
}


.wDatePicker{
	padding-right: 5px;
}
.wDatePicker .wdp-titleBar-date{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
.wDatePicker .wdp-titleBar{
	height: 30px;
	line-height: 30px;
	position: relative;
}
.wDatePicker .wdp-titleBar-l-arrow{
	float: left;
	height: 100%;
	width: 50px;
}
.wDatePicker .wdp-titleBar-date{
	position: absolute;
	left:50px;
	right: 50px;
	top:0;
	bottom:0;
}
.wDatePicker .wdp-titleBar-r-arrow{
	float: right;
	height: 100%;
	width: 50px;
}
.wDatePicker .wdp-titleBar-arrow i{
	font-size: 20px;
	display: block;
	width:30px;
	height: 30px;
	margin-top:0px;
	margin-left:10px;
	cursor: pointer;
	font-style: normal;
	line-height: 30px;
}
.wDatePicker .wdp-dc-fail{
	color:#ccc;
}
.wDatePicker .wdp-dc-current{
	background-color: #dbecff;
	border-radius: 5px;
	color:#58a7ff;
}
.wDatePicker .wdp-dc-normal:hover{
	background-color: #4da1ff;
	border-radius: 5px;
	color:#FFF;
	cursor:pointer;
}
.wDatePicker .wdp-dc-select{
	background-color: #4da1ff;
	border-radius: 5px;
	color:#FFF;
	cursor:pointer;
}
/*日历控件样式 end*/

body{
}

.box{
	border:1px solid #ccc;
	margin-bottom:10px;
	overflow:hidden;
}
.datePick{
	padding:10px;
}

.buttons{
	height: 50px;
}
.button{
    border:1px solid #4DA1FF;
    border-radius: 3px;
    padding-left:10px;
    padding-top:3px;
    padding-bottom:3px;
    padding-right: 10px;
    margin-left:10px;
    cursor:pointer;
    display: block;
    float: left;
    margin-top:10px;
    background-color:#0fa;
}
</style>
</head>
<body>
<h3>wDatePicker is good date component. </h3>
<h3>write by wuweiwei</h3>
<h3><a target="_blank" href="http://www.github.com/flybirdsoft">www.github.com/flybirdsoft</a></h3>
<h3 style="color:#f00">安装: npm install wdatepicker</h3>
<hr>
<h4>example:</h4>
<div class="box">
	<div class="buttons">
		<span class="button" id="btn_setRange">设置日期可用范围(2018-7-20至2019-10-10)</span>
		<span class="button" id="btn_setRange_reset">恢复成日期可选</span>
	</div>
	<div id="date1" class="datePick"></div>
</div>

<div class="box">
	<div class="buttons">
		<span class="button" id="btn_setMonth">设置只能选择2018-7</span>
		<span class="button" id="btn_setAllMonth">恢复设置</span>
	</div>
	<div id="date2" class="datePick"></div>
</div>

<div class="box">
	<div class="buttons">
		<span class="button" id="btn_setEnableDay">设置只能选择2018-7,且指定的日子</span>
		<span class="button" id="btn_reset">恢复设置</span>
	</div>
	<div id="date3" class="datePick"></div>
</div>

</body>
</html>
<script type="text/javascript" src="wDatePicker.js"></script>
<script type="text/javascript">
var date1 = new wDatePicker({
	container:document.getElementById("date1"),
	date:"2018-7-7",
	arrowLeftText:"<",
	arrowRightText:">",
	width:240,
	height:240,
	gap:10,
	//disableDay:[20,21,25],
	//enableDay:[21,23,24,25],
	// usebleDate:{
	// 	beginDate:"2018-7-20",
	// 	endDate:"2018-8-20"
	// },
	//startDate:"2018-6-10",
	//endDate:"2018-6-30",
	onclick:function(e,date){
		console.log(date);
	},
	onprevclick:function(e,date){
		console.log(date);
	},
	onnextclick:function(e,date){
		console.log(date);
	}
});

var date2 = new wDatePicker({
	container:document.getElementById("date2"),
	date:"2018-7-7",
	arrowLeftText:"<",
	arrowRightText:">",
	width:240,
	height:240,
	gap:10,
	onclick:function(e,date){
		console.log(date);
	},
	onprevclick:function(e,date){
		console.log(date);
	},
	onnextclick:function(e,date){
		console.log(date);
	}
});

var date3 = new wDatePicker({
	container:document.getElementById("date3"),
	date:"2018-7-7",
	arrowLeftText:"<",
	arrowRightText:">",
	width:240,
	height:240,
	gap:10,
	onclick:function(e,date){
		console.log(date);
	},
	onprevclick:function(e,date){
		console.log(date);
	},
	onnextclick:function(e,date){
		console.log(date);
	}
});

document.getElementById("btn_setRange").onclick = function(){
	date1.setUsebleDate({
			beginDate:"2018-7-20",
			endDate:"2019-10-10"
	});	
}
document.getElementById("btn_setRange_reset").onclick = function(){
	date1.setUsebleDate();	
}


document.getElementById("btn_setMonth").onclick = function(){
	/*注意:这里的日不起作用*/
	date2.setStartDate("2018-7-10");
	date2.setEndDate("2018-7-30");
}

document.getElementById("btn_setAllMonth").onclick = function(){
	date2.setStartDate();
	date2.setEndDate();
}

document.getElementById("btn_setEnableDay").onclick = function(){
	/*注意:这里的日不起作用*/
	date3.setStartDate("2018-7-10");
	date3.setEndDate("2018-7-30");
	date3.setEnableDay([1,3,5,7,9,11,13,15]);
}
document.getElementById("btn_reset").onclick = function(){
	/*注意:这里的日不起作用*/
	date3.setStartDate();
	date3.setEndDate();
	date3.setEnableDay();
}
</script>